<script setup lang="ts">
interface Props {
    data?: any
}
const props = withDefaults(defineProps<Props>(), {
    data: () => []
})
const closeDialog = inject('closeDialog', () => { })
const checked = ref<string[]>([])

function toggleItem(item: any) {
    checked.value = checked.value.includes(item.platform_id) ? xor(checked.value, [item.platform_id]) : [...checked.value, item.platform_id]
}
function clear() {
    checked.value = []
}
defineExpose({
    checked
})
</script>
<template>
    <div class="flex flex-col select-provider">
        <BaseButton type="none" v-for="(item, i) in data" :key="i" class="button  px-2 rounded-[.25rem] mb-2  justify-start"
            :class="[checked.includes(item.platform_id) ? 'bg-bg-black-4' : '']" @click="toggleItem(item)">
            <BaseCheckbox :checked="checked.includes(item.platform_id)" class="p-[.125rem] mr-1"></BaseCheckbox>
            <BaseImage class="h-[1.75rem]" :url="item?.icon || ''" is-cloud loading="eager" />
        </BaseButton>
    </div>
    <div @click="clear"
        class="sticky left-0 flex h-9 w-full cursor-pointer border-solid bg-bg-black-3 center -bottom-2 border-t border-[var(--color-bg-black-5)]">
        <BaseIcon name="delete2" class=" text-[1rem]" />
        <span class="ml-2 font-semibold text-brand">
            {{ $t('clear_all') }}
        </span>
    </div>
</template>
<style scoped lang="scss">
.select-provider {
    --bc-checkbox-size: 1.25rem;
}
</style>
